.diycollspan {
  .ant-collapse-header {
    padding: 4px !important;
  }

  .ant-collapse-content-box {
    padding: 4px !important;
  }
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
}

.item {
  align-items: flex-start;

  label {
    color: var(--ant-color-text-label);
  }
}

.spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.centerl {
  display: flex;
}
.slider {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    margin-top: -4px;
  }
}

.actionbar {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px;
  z-index: 999;
}
.actionbars {
  position: absolute;
  right: 7px;
  bottom: 4px;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 4px;
  z-index: 999;
  background-color: rgba(0, 145, 255, 0.354);
  border-radius: 4px;
}
.mt2 {
  margin-top: 2px;
}

.mt4 {
  margin-top: 4px;
}

.mt6 {
  margin-top: 6px;
}

.mt8 {
  margin-top: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt12 {
  margin-top: 12px;
}

.element {
}
/* 显示内容的滚动条 */
.element::-webkit-scrollbar {
  width: 0.2em; /* 调整滚动条宽度 */
}

/* 滚动条的轨道 */
.element::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 滚动条的滑块 */
.element::-webkit-scrollbar-thumb {
  background: rgba(201, 201, 201, 0.454); /* 设置滑块的背景颜色 */
  border-radius: 4px; /* 设置滑块的圆角 */
}

/* 鼠标悬停在滑块上时 */
.element::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 设置悬停状态下滑块的背景颜色 */
}

.diyform {
  label {
    font-size: 12px !important;
    font-weight: lighter !important;
    color: #000000 !important;
  }
  .ant-form-item-explain-error {
    font-size: 12px !important;
  }
  .ant-form-item {
    margin-bottom: 12px !important;
  }
}
#pop {
  .ant-drawer-body {
    padding: 12px;
    background-color: #f0f0f0;
  }
}
.spacer {
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  opacity: 0.25;
  height: 100px;
}

.ltitle {
  position: relative;
  width: 100%;
  padding-left: 12px;
  font-weight: bolder;
  justify-content: space-between;
  display: flex;
  align-items: center;
  &::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    height: 16px;
    background-color: #f76e03;
    border-radius: 4px;
    content: "";
  }
}
.ltitle0 {
  position: relative;
  width: 100%;
  padding-left: 12px;
  font-weight: bolder;
  justify-content: space-between;
  display: flex;
  align-items: center;
  &::before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 3px;
    height: 16px;
    background-color: #f76e03;
    border-radius: 4px;
    content: "";
  }
}
.ant-page-header-heading-left {
  align-items: baseline !important;
}

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

.react-resizable-handle {
  position: absolute;
  right: -5px;
  bottom: 0;
  z-index: 1;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

// protable 默认样式覆盖
.ant-pro-table .ant-pro-table-search,
.ant-pro-card-body {
  margin: 0 !important;
  padding: 6px !important;
}

.ant-pro-table-list-toolbar-container {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

.ant-pro-table-list-toolbar-right {
  flex: 1 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap;
}

.ant-pro-table-list-toolbar-left {
  display: none !important;
}

.diycard {
  .ant-card-head {
    padding: 4px 12px 4px 18px !important;
  }

  .ant-card-body {
    padding: 8px 12px !important;
  }

  .ant-tree {
    background: transparent !important;
  }
}
.ant-pro-form-list-action {
  margin-block-end: 26px !important;
  margin-left: 12px !important;
}
.ant-pro-form-list-action-icon{
  border: 1px solid #dfdfdf;
  padding: 8px;
  border-radius: 4px;
}
.anticon-copy{
  color: #03a2f7 !important;
}
.anticon-delete{
  color: #f76e03 !important;
}
.oneline {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}